<template>
    <div class="home-box">
        <!-- 首页分类列表 start -->
        <div v-for="(item, index) in types" :key="index">
            <div class="list-name">
                <span>{{ item.typeName }}</span>
                <span class="list-more">更多 ></span>
            </div>
            <FilmList class="list-content" :list="item.list"></FilmList>
        </div>
        <!-- 首页分类列表 end -->
    </div>
</template>
<script>
/*
    通过模块导入方式，加载 axios 异步请求方法对象
    该对象的原型上定义了可被访问的异步请求方法
*/
import axios from "axios";
import FilmList from "../components/FilmList";

export default {
    components: {
        FilmList
    },
    data() {
        return {
            types: [],
            size: 4
        };
    },
    methods: {
        getHomeData1() {
            // axios.get(url[, config])
            //     url：描述请求地址
            //     该方法会返回一个 primise 对象
            //          状态 reslove 表示请求成功
            //              => 表示 .then()第一个方法参数 描述请求成功
            //          状态 reject 表示请求失败
            //               => 表示 .catch()或者.then()第二个方法参数 描述请求失败
            //      config 定义请求的相关配置
            //          超时时间，get请求参数，请求前的处理方法……
            //          baseURL 定义当前请求的前缀值
            //          params 定义请求的携带参数 key为参数名，value参数值
            // var p = axios.get("http://127.0.0.1:8080/datas/home1111.json");
            // console.log(p);
            // p.then(function() {
            //     console.log("请求成功", p);
            // }).catch(function() {
            //     console.log("请求失败", p);
            // });
            axios
                .get("http://127.0.0.1:8080/datas/home.json")
                .then(function(response) {
                    // 自带响应对象 - 不是后台数据
                    // 1、请求的相关配置
                    // 2、响应的相关状态
                    // 3、响应的携带数据
                    // 4、被封装的 XMLHttpRequest 对象
                    // 5、定义后台响应数据对象 data
                    //      在获取后台响应数据的同时获取响应数据类型
                    //      根据类型将数据转为J变量
                    console.log("请求成功", response);
                    // console.log("请求成功",response.data);
                    /*
                        ajax请求发送且响应成功
                        -> 数据接收完成的成功
                           响应状态接收完成，但响应数据错误
                        -> 数据接收完成的成功
                            响应状态接收完成，且响应数据正确
                    */
                    if (
                        response.statusText == "OK" &&
                        response.data.resultState
                    ) {
                        console.log("请求成功", response.data);
                    } else {
                        // alert("网络延迟，稍后重试!");
                        return Promise.reject({
                            message: "网络延迟，稍后重试!"
                        });
                    }
                })
                .catch(function(error) {
                    // 自带错误消息对象
                    console.log("请求失败", error.message);
                    alert("请求失败:" + error.message);
                });
        },
        getHomeData2() {
            axios
                .get("http://127.0.0.1:8080/datas/home.json")
                .then(({ statusText, data }) => {
                    if (statusText != "OK" || !data.resultState) {
                        return Promise.reject({
                            message: "网络延迟，稍后重试!"
                        });
                    }
                    // console.log("请求成功", data);
                    console.log(this);
                    this.types = data.result;
                })
                .catch(error => {
                    alert("请求失败:" + error.message);
                });
        },
        getHomeData3() {
            // var baseUrl = process.env.NODE_ENV==="development"?"/api":"http://127.0.0.1:80";
            // console.log("baseUrl:",baseUrl);
            axios
                // .get("http://127.0.0.1:80/filmApi/loadTyps.php")
                // .get(baseUrl+"/filmApi/loadTyps.php")
                .get(this.$baseUrl + "/filmApi/loadTyps.php")
                .then(({ statusText, data }) => {
                    if (statusText != "OK" || !data.resultState) {
                        return Promise.reject({
                            message: "网络延迟，稍后重试!"
                        });
                    }
                    // console.log("请求成功", data);
                    // console.log(this);
                    this.types = data.result;
                })
                .catch(error => {
                    alert("请求失败:" + error.message);
                });
        },
        loadFilmsByTypeId(typeId) {
            axios
                // .get(this.$baseUrl + "/filmApi/loadFilms.php?typeId=10002&size="+this.size)
                .get("/filmApi/loadFilms.php", {
                    baseURL: this.$baseUrl,
                    params: {
                        typeId,
                        size: this.size
                    }
                })
                .then(({ statusText, data }) => {
                    if (statusText != "OK" || !data.resultState) {
                        return Promise.reject({
                            message: "网络延迟，稍后重试!"
                        });
                    }
                    // console.log(data.result);
                })
                .catch(() => {});
        },
        // 描述该方法中存在异步方法需要转同步
        async loadFilmsByTypeId2(typeId) {
            // 描述将该方法进行异步等待-实现同步执行
            let temp = await axios.get("/filmApi/loadFilms.php", {
                baseURL: this.$baseUrl,
                params: {
                    typeId,
                    size: this.size
                }
            });
            console.log(temp);
            // 如果 async 方法被外部调用，返回的依然是 promise 对象
            return temp;
        },
        // 转同步的执行方式
        async loadHomeDatas(){
            try {
                let typesRespose = await axios.get("/filmApi/loadTyps.php",{ 
                    baseURL:this.$baseUrl 
                });
                // console.log(typesRespose);
                if (typesRespose.statusText != "OK" || !typesRespose.data.resultState) {
                    // return;
                    // 抛出一个自定义错误，一旦执行throw 后续代码会停止运行
                    throw new Error("网络不通");
                }
                let types = typesRespose.data.result;
                for (let i = 0; i < types.length; i++) {
                    let tempResponse = await axios.get("/filmApi/loadFilms.php", {
                        baseURL: this.$baseUrl,
                        params: {
                            typeId:types[i].typeId,
                            size: this.size
                        }
                    });
                    if (tempResponse.statusText != "OK" || !tempResponse.data.resultState) {
                        throw new Error("网络不通");
                    }
                    types[i].list = tempResponse.data.result;
                }
                // console.log(types);
                this.types = types;
            } catch (error) {
                console.log(error.message);
                // alert("请求错误:"+error.message);
            }
        },
        // promise 的 all 封装装载方式
        loadHomeDatas2(){
            axios
                .get("/filmApi/loadTyps.php",{
                    baseURL:this.$baseUrl
                })
                .then(({ statusText, data }) => {
                    if (statusText != "OK" || !data.resultState) {
                        return Promise.reject({
                            message: "网络延迟，稍后重试!"
                        });
                    }
                    this.types = data.result;
                })
                .then(()=>{
                    let ps = [];
                    for (let i = 0; i < this.types.length; i++) {
                        var p = axios.get("/filmApi/loadFilms.php", {
                                baseURL: this.$baseUrl,
                                params: {
                                    typeId:this.types[i].typeId,
                                    size: this.size
                                }
                            });
                        ps.push(p);
                    }
                    // console.log(ps);
                    // 一个 promise 对象 定义在另外一个 promise 对象的 成功 方法中
                    //  可以通过return 方式 将该对象导出给下一个then进行执行 
                    return Promise.all(ps)
                })
                .then((reps)=>{
                    // console.log(reps)
                    for (let i = 0; i < this.types.length; i++) {
                        if (reps[i].statusText != "OK" || !reps[i].data.resultState) {
                            return Promise.reject({
                                message: "网络延迟，稍后重试!"
                            });
                        }
                        // this.types[i].list = reps[i].data.result;
                        this.$set(this.types[i],"list",reps[i].data.result);
                    }
                })
                .catch(error => {
                    alert("请求失败:" + error.message);
                });
        }
    },
    mounted() {
        // console.log(axios.prototype);
        // this.getHomeData3();
        // this.loadFilmsByTypeId(10001);
        // this.loadFilmsByTypeId(10002);
        // this.loadFilmsByTypeId(10003);
        // console.log(this.types);
        // for (let i = 0; i < this.types.length; i++) {
        //     console.log(this.types[i].typeId);
        //     this.loadFilmsByTypeId(this.types[i].typeId);
        //     // this.types[i].list =
        // }
        // this.loadFilmsByTypeId2();

        // this.loadHomeDatas();
        this.loadHomeDatas2();

    }
};
</script>

<style lang="less" scoped>
// 首页样式
.home-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.list-content {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.1rem;
    font-size: 0rem;
    &::after {
        content: "";
        width: 0.1rem;
        display: inline-block;
    }
}
</style>